<template>
<div class="main-container" id="app">
    <div id="mapDiv" class="map-div">
    </div>
    <div class="left-tree" style="margin-top: 10px;margin-left: 10px;">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
</template>
<script>
import {loadScript, loadCss,loadModules} from 'esri-loader';
import website from '@/config/website';
import $ from 'jquery';
import "@/assets/css/gis/default.css";
import "@/assets/css/gis/zTreeStyle/zTreeStyle.css";
import "@/assets/css/gis/video.css";
import "@/assets/css/gis/map.css";
var map,gridGraphicsLayer,gridFillSymbol,countyGridArray;
export default {
  name: 'web-map',
  mounted() {
    loadScript({ url: website.InitUrl})
    loadCss(website.CssUrl)
    loadModules([
                'esri/map',
                'esri/layers/ArcGISTiledMapServiceLayer',
                'esri/layers/GraphicsLayer',
                'esri/geometry/Polygon',
                'esri/symbols/SimpleFillSymbol',
                'esri/symbols/SimpleLineSymbol',
                'esri/graphic',
                'esri/Color',
                'esri/graphicsUtils',
                'dijit/dijit',
                'esri/lang',
                'dojo/dom-style',
                
                'dojo/domReady!',
            ], { css: true })
            .then(([
                Map,
                ArcGISTiledMapServiceLayer,GraphicsLayer,Polygon,SimpleFillSymbol,SimpleLineSymbol,Graphic,Color,graphicsUtils,dijit,lang,domStyle
            ]) => {
                //实例化地图
                map = new Map("mapDiv", {
                center: website.MapCenterPoint,
                zoom: 13,
                slider: false, //缩放按钮移除
                logo: false, //logo移除
                isDoubleClickZoom: false,
                });
                //加载图层
                let mapServer = new ArcGISTiledMapServiceLayer(website.BaseMapUrl)
                map.addLayer(mapServer)
                //地图网格范围层
                gridGraphicsLayer = new GraphicsLayer({id: "gridGraphicsLayer"});
                map.addLayer(gridGraphicsLayer);
                //鼠标移动事件
                var content =  "<b>${XZQHMC}</b>";
                gridGraphicsLayer.on("mouse-over", function (evt) {
                    showTooltip(evt, content);
                });
                gridGraphicsLayer.on("mouse-out", function () {
                    closeDialog();
                });
                //
                function showTooltip(evt, cont, id){
                    if(!evt.graphic) return;
                    if(!id) id = "tooltipDialog";
                    closeDialog(id);
                    if(id == "tooltipDialog" ){
                        map.setMapCursor("pointer");
                    }
                    var dialog = new dijit.TooltipDialog({
                        id : id,
                        style : "position: absolute;padding:0px;margin:0;background-color:#fff;font: normal normal normal 13pt Helvetica;z-index:10000;color:black;width:200px;height:auto"
                    });
                    var content = lang.substitute(evt.graphic.attributes, cont);
                    dialog.setContent(content);
                    domStyle.set(dialog.domNode, "opacity", 1);
                    dijit.placeOnScreen(dialog.domNode, {x: evt.pageX, y: evt.pageY}, ["TL", "BL"], {x: 10, y: 10});
                }
                //加载数据
                map.on("load", mapLoad);
                function mapLoad() {
                    initMapGrid();
                }
                //关闭弹出
                function closeDialog(id) {
                    if(!id){
                        id = "tooltipDialog";
                        map.setMapCursor("default");
                    }

                    var widget = dijit.byId(id);
                    if (widget) {
                        widget.destroy();
                    }
                }
                function initMapGrid() {
                     var baseUrl =website.GeoServerBaseUrl+"/cite/ows?service=WFS&version=1.1.0&request=GetFeature&typename=SMART_GIS_GIRD1&outputFormat=json&maxFeatures=80";
                        $.ajax({
                            type: 'post',
                            url: baseUrl,
                            dataType: 'json',
                            success: success
                        });
                        //请求成功加载数据
                        function success(result) {
                            gridGraphicsLayer.clear();
                                if (!countyGridArray)
                                    countyGridArray = result.features;
                                for (var i = 0; i < result.features.length; i++) {
                                    var obj = result.features[i];
                                    var polygonJson;
                                    if (obj.geometry.type === "Polygon") {
                                        polygonJson = {"rings": obj.geometry.coordinates, "spatialReference": {"wkid": website.Mapwkid}};
                                    } else {
                                        var geoArr = [];
                                        for (var n = 0; n < obj.geometry.coordinates.length; n++) {
                                            geoArr.push(obj.geometry.coordinates[n][0]);
                                        }
                                        polygonJson = {"rings": geoArr, "spatialReference": {"wkid": website.Mapwkid}};
                                    }
                                    var polygon = new Polygon(polygonJson);
                                    gridFillSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                        new Color([66, 0, 0]), 1), new Color([255, 99, 33, 0.15]));
                                    var gra = new Graphic(polygon, gridFillSymbol, obj.properties);
                                    gridGraphicsLayer.add(gra);

                        }
                     map.setExtent(graphicsUtils.graphicsExtent(gridGraphicsLayer.graphics), true);
                }
            }
        })
  },

  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null
    }
  },
}
</script>
 
<style lang="scss" scoped>

</style>